<style type="text/css">
    .findpw-main {
        margin-top: 0px;
    }

    .findpw-body {
        margin-top: 0px;
        border-bottom: 1px solid #dddddd;
        margin-bottom: 30px;
    }
    .btn-submit {
        background-color: #00acb2;
        border-color: #00acb2;
        width: 100%;
        color: #fff;
        outline: none;
    }
    .btn-submit:hover,
    .btn-submit:focus,
    .btn-submit.focus,
    .btn-submit:active,
    .btn-submit.active {
        color: #fff;
        background-color: #00acb2;
        border-color: #00acb2;
        outline: none;
        border: none;
        background-image: none;
    }
    /*.form-control {*/
        /*height: 40px;*/
    /*}*/
    .control-label1{
        margin-left: -60px;
        margin-top: 7px;
        position: absolute;
    }
    .control-label2{
        margin-left: -45px;
        margin-top: 22px;
        position: absolute;
    }
    .control-label3{
        margin-left: -57px;
        margin-top: 22px;
        position: absolute;
    }


    .padding-left{
        padding-left: 0px;
    }

    .verify-error{
        color:red;
    }


</style>
<link rel="stylesheet" href="/stylesheets/style.css" />
<link rel="stylesheet" href="/stylesheets/biz/agent/agent.css" />


<div class="container findpw-main">
    <div class="row">
            <div class="row findpw-body">
                <section class="col-md-4" >
                    <form class="form-horizontal" role="form" action="/doEditPwd"  id="editpwd-form" >
                        <input type="hidden" name="t" value="" id="t"/>
                        <div class="form-group">
                            <div class="col-sm-6 padding-left" >
                                <label for="mobile" class="control-label1">旧密码：</label>
                                <input type="password" class="form-control" id="oldpassword" data-verify="empty password" name="oldpassword"  placeholder="请输入旧密码">
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="password" class="control-label2">新密码：</label>
                            </br>
                            <div class="col-sm-6 padding-left" >
                                <input type="password" class="form-control" id="password" data-verify="empty password" name="password"  placeholder="请输入新密码">
                            </div>


                        </div>



                        <div class="form-group">
                            <label for="password" class="control-label3">密码确认：</label>
                            </br>
                            <div class="col-sm-6 padding-left" >
                                <input type="password" class="form-control" id="password2" data-verify="empty password twice" data-twice="password" name="password2" placeholder="再确认一次" >
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-6 padding-left" >
                                <button type="submit" class="btn btn-submit">提交</button>
                            </div>
                        </div>

                    </form>
                </section>

            </div>

        </div>
    </div>
</div>
<script src="http://g.alicdn.com/kissy/k/1.4.7/seed-min.js" data-config="{combine:false}"></script>
<script src="/javascripts/bui/adapter-min.js"></script>
<!--初始化当页脚本-->
<script>

    KISSY.use(['node','io'], function (S,N,IO) {
        var $ = S.all;
        var V = {
            init : function() {

            },
            verify : function(type,value,value2) {
                switch ( type ) {

                    case 'illegal':
                        return {
                            ok: !(/[\s%^&#$\/\\]+/ig.test(value)),
                            msg: '字符非法'
                        };

                    case 'empty':
                        return {
                            ok: !!(value.replace(/\s*/ig, '').length > 0),
                            msg: '此项为必填项'
                        }

                        break;

                    case 'twice':
                        return {
                            ok: !!(value == value2),
                            msg: '两次输入不相等'
                        }
                        break;

                    case 'password':
                        return {
                            ok: !!(value.length >= 0),
                            msg: '密码长度至少6位'
                        }
                        break;

                    default:
                        break;
                }
            }
        };

        var F = {
            init: function (conf) {
                this._form = conf.form;
                this.btnSubmit = conf.btnSubmit || this._form.one('.btn-submit');
                this._url = this._form.attr("action");
                this._field = this._form.all('input[name], textarea[name], select[name]');
                this._formData = {};
                this._verifyFiled = this._form.all('input[data-verify], textarea[data-verify]');
                this._callback = conf.sendSuccess || undefined;


                var self = this;
                //失焦验证
                self._verifyFiled.on('blur', function() {
                    self.verifyAction(this);
                });

                //提交方法
                self._form.on('submit', function(){
                    self.verifyAll();

                    if ( self._form.all('input.has-error').length < 1 ) {
                        self.send(self._callback);
                    }
                    return false;
                });

            },
            //验证展示
            verifyAction: function (that) {

                        var self    = this,
                        v = self.validate($(that)),
                        parent  = $(that).data('_parent');

                if (v) {

                    self.buildVerify(that, v.msg);
                    $(that).addClass('has-error');
                    $(that).parent().addClass('has-error');
                    $(that).parent().parent().addClass('has-error');
                } else if (parent) {

                    $(that).removeClass('has-error');
                    $(that).parent().removeClass('has-error');
                    $(that).parent().parent().removeClass('has-error');
                    parent.one('.verify-error').hide();

                } else {

                }
            },
            //建立验证需要的DOM元素
            buildVerify : function(that,msg) {
                var parent = $(that).data('_parent');
                if ( !parent ) {
                    $(that).data('_parent', $(that).parent());
                    parent = $(that).data('_parent');
                    parent.append('<span class="verify-error icon-notification" title="'+msg+'">'+msg+'</span>');
                }
                parent.one('.verify-error').attr('title', msg).html(msg).show();
            },
            //验证逻辑
            validate : function ( node ) {
                var type = node.attr('data-verify').split(' '),
                        isOk = undefined,
                        temp = {};

                for ( var i = 0, len = type.length; i < len; i++ ) {
                    if ( type[i] == 'twice') {
                        temp = V.verify( type[i], node.val(), $('input[name='+node.attr('data-twice')+']').val());
                    } else {
                        temp = V.verify(type[i], node.val());
                    }
                    if ( !temp.ok ) {
                        isOk = temp;
                        break;
                    }
                }

                return isOk;

            },
            verifyAll : function() {
                var self = this;
                self._verifyFiled.each(function(item, index) {
                    self.verifyAction(item);
                });
            },
            getData : function() {
                var self = this;

                self._field.each(function(item, index) {
                    self._formData[$(item).attr('name')] = $(item).val();
                });
            },
            reset : function() {
                var self = this;

                self._field.each(function(item, index) {
                   $(item).val("");
                });
            },
            send : function() {

                var self = this;

                self.getData();
                // console.log(self._formData);

                IO.post(self._url, self._formData, function(json){

                    if ( json.code == 1 ) {
                        var target = $('input[name='+json.data.field+']');
                        if(target)
                            self.buildVerify(target, json.msg);
                        else
                            alert(json.msg);
                    } else if ( json.code == 0 ){
                        if ( self._callback ) {
                            self._callback.call(self, json);
                        }
                    }
                }, 'json');
            },
            submit : function() {
                this._form.submit();
            }
        };


        F.init({
            form: $('#editpwd-form'),
            sendSuccess: function(d) {
                if(d.code == 0){
                    alert(d.msg);
                    this.reset();
                }

            }
        });

    });
</script>

